<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
-->

<nz-card
  nzHoverable
  [style]="{ height: height || '100%', display: 'flex', flexDirection: 'column' }"
  [nzBordered]="true"
  [nzBodyStyle]="{ overflow: !monitor ? 'hidden' : 'auto' }"
  [nzTitle]="card_title"
  [nzLoading]="!app || loading"
  [nzExtra]="!monitor ? metrics_card_extra : monitor_card_extra"
>
  <div *ngIf="!!monitor">
    <div nz-row nzGutter="16">
      <div nz-col nzSpan="8"><p style="text-align: right">ID</p></div>
      <div nz-col nzSpan="16"
        ><p style="text-align: left">{{ monitorId }}</p></div
      >
    </div>
    <div nz-row nzGutter="16">
      <div nz-col nzSpan="8"
        ><p style="text-align: right">{{ 'monitors.detail.name' | i18n }}</p></div
      >
      <div nz-col nzSpan="16"
        ><p style="text-align: left">{{ monitor.name }}</p></div
      >
    </div>
    <div nz-row nzGutter="16">
      <div nz-col nzSpan="8"><p style="text-align: right">HOST</p></div>
      <div nz-col nzSpan="16"
        ><p style="text-align: left">{{ monitor.host }}</p></div
      >
    </div>
    <div nz-row nzGutter="16">
      <div nz-col nzSpan="8"
        ><p style="text-align: right">{{ 'monitors.detail.port' | i18n }}</p></div
      >
      <div nz-col nzSpan="16"
        ><p style="text-align: left">{{ port }}</p></div
      >
    </div>
    <div nz-row nzGutter="16">
      <div nz-col nzSpan="8"
        ><p style="text-align: right">{{ 'monitors.detail.description' | i18n }}</p></div
      >
      <div nz-col nzSpan="16"
        ><p style="text-align: left">{{ monitor.description }}</p></div
      >
    </div>
    <div nz-row nzGutter="16">
      <div nz-col nzSpan="8"
        ><p style="text-align: right">{{ 'monitors.detail.status' | i18n }}</p></div
      >
      <div nz-col nzSpan="16">
        <nz-tag *ngIf="monitor.status == 0" nzColor="default">
          <i nz-icon nzType="meh" nzTheme="outline"></i>
          <span>{{ 'monitor.status.paused' | i18n }}</span>
        </nz-tag>
        <nz-tag *ngIf="monitor.status == 1" nzColor="success">
          <i nz-icon nzType="smile" nzTheme="outline"></i>
          <span>{{ 'monitor.status.up' | i18n }}</span>
        </nz-tag>
        <nz-tag *ngIf="monitor.status == 2" nzColor="error">
          <i nz-icon nzType="frown" nzTheme="outline"></i>
          <span>{{ 'monitor.status.down' | i18n }}</span>
        </nz-tag>
      </div>
    </div>
    <div nz-row nzGutter="16">
      <div nz-col nzSpan="8"
        ><p style="text-align: right">{{ 'monitor.intervals' | i18n }}</p></div
      >
      <div nz-col nzSpan="16"
        ><p style="text-align: left">{{ monitor.intervals }}s</p></div
      >
    </div>
    <div nz-row nzGutter="16">
      <div nz-col nzSpan="8"
        ><p style="text-align: right">{{ 'common.new-time' | i18n }}</p></div
      >
      <div nz-col nzSpan="16"
        ><p style="text-align: left">{{ monitor.gmtCreate | date : 'YYYY-MM-dd HH:mm:ss' }}</p></div
      >
    </div>
    <div nz-row nzGutter="16">
      <div nz-col nzSpan="8"
        ><p style="text-align: right">{{ 'common.edit-time' | i18n }}</p></div
      >
      <div nz-col nzSpan="16"
        ><p style="text-align: left">{{ monitor.gmtUpdate | date : 'YYYY-MM-dd HH:mm:ss' }}</p></div
      >
    </div>
  </div>
  <nz-table
    *ngIf="!monitor && isTable"
    nzSize="small"
    nzNoResult="No Metrics Data"
    [nzFrontPagination]="false"
    [nzShowPagination]="false"
    [nzData]="valueRows"
    [nzScroll]="{ y: scrollY }"
    #smallTable
  >
    <thead>
      <tr>
        <th style="text-align: center" *ngFor="let field of fields">
          {{ 'monitor.app.' + app + '.metrics.' + metrics + '.metric.' + field.name | i18nElse : field.name }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let valueRow of smallTable.data">
        <td *ngFor="let value of valueRow.values; let i = index">
          {{ value.origin }}
          <nz-tag *ngIf="value.origin == null" nzColor="warning">{{ 'monitors.detail.value.null' | i18n }}</nz-tag>
          <nz-tag *ngIf="fields[i].unit" nzColor="success">{{ fields[i].unit }}</nz-tag>
        </td>
      </tr>
    </tbody>
  </nz-table>
  <nz-table
    *ngIf="!monitor && !isTable"
    nzSize="small"
    nzNoResult="No Metrics Data"
    [nzFrontPagination]="false"
    [nzShowPagination]="false"
    [nzData]="valueRows"
    [nzScroll]="{ y: scrollY }"
  >
    <thead>
      <tr>
        <th style="text-align: center">{{ 'common.name' | i18n }}</th>
        <th style="text-align: center">{{ 'common.value' | i18n }}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let field of fields; let i = index">
        <td>
          {{ 'monitor.app.' + app + '.metrics.' + metrics + '.metric.' + field.name | i18nElse : field.name }}
        </td>
        <td
          >{{ rowValues[i].origin }}
          <nz-tag *ngIf="rowValues[i].origin == null" nzColor="warning">{{ 'monitors.detail.value.null' | i18n }}</nz-tag>
          <nz-tag *ngIf="field.unit" nzColor="success">{{ field.unit }}</nz-tag>
        </td>
      </tr>
    </tbody>
  </nz-table>
</nz-card>

<ng-template #card_title>
  <p style="font-size: small; text-align: left">
    {{ !monitor ? ('monitor.app.' + app + '.metrics.' + metrics | i18nElse : metrics) : ('monitors.detail.basic' | i18n) }}
  </p>
</ng-template>

<ng-template #monitor_card_extra>
  <a nz-icon nzType="edit" nzTheme="outline" [routerLink]="['/monitors/' + monitorId + '/edit']"></a>
</ng-template>

<ng-template #metrics_card_extra>
  <div nz-popover [nzPopoverContent]="('monitors.collect.time.tip' | i18n) + ': ' + (time | _date : 'yyyy-MM-dd HH:mm:ss')">
    <a><i nz-icon nzType="field-time" nzTheme="outline"></i></a>
    <i style="font-size: 13px; font-weight: normal; color: rgba(112, 112, 112, 0.89)">
      {{ 'monitors.collect.time' | i18n }}: {{ time | _date : 'HH:mm:ss' }}
    </i>
  </div>
</ng-template>
